<template>
    <div class="content">
        <el-table
                :data="tableData"
                border
                style="width: 842px">
            <el-table-column
                    prop="announcementId"
                    label="公告id"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="announcement"
                    label="公告内容"
                    width="600"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="140">
                <template scope="scope">
                    <el-button @click="deleteAnnouncement(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="addAnnouncement">
            <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入公告内容"
                    v-model="announcement">
            </el-input>
            <el-button @click="addAnnouncement">添加</el-button>
        </div>
    </div>
</template>
<script>
    import {Message} from 'element-ui';
    export default{
        data:function () {
            return {
                tableData:[],
                announcement:''
            }
        },
        methods:{
            //获取现有的所有公告
            getAllAnnouncement:function () {
                this.$http.get('http://localhost/api/getAllAnnouncement').then(function (result) {
                    console.log(result.body);
                    this.tableData = result.body;
                })
            },
            //删除公告
            deleteAnnouncement:function (row) {
                this.$http.post('http://localhost/api/deleteAnnouncement',{announcementId:row.announcementId},{emulateJSON:true}).then(function (result) {
                    Message({
                        type:'success',
                        message:result.body.message
                    })
                    this.getAllAnnouncement();
                })
            },
            //添加公告
            addAnnouncement:function () {
                this.$http.post('http://localhost/api/addAnnouncement',{announcement:this.announcement},{emulateJSON:true}).then(function (result) {
                    Message({
                        type:'success',
                        message:result.body.message
                    })
                    this.getAllAnnouncement();
                });
            }
        },
        created:function () {
            this.getAllAnnouncement();
        }
    }
</script>
<style scoped>
    .content{
        width: 100%;
        padding: 20px;
    }
    .addAnnouncement{
        margin-top: 30px;
        width: 840px;
    }
</style>